<!-- src/components/Header.vue -->
<template>
  <header class="header">
    <span style="line-height: 100%"
        @click="$emit('toggleSidebar')"
    >
      <svg data-v-4e6f274c="" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="30" height="30" :class="['hamburger', {'is-active': isCollapsed}]"><path data-v-4e6f274c="" d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"></path></svg>
    </span>
    <h1 class="title">智汇电商</h1>
    <div class="user-info">
      <span style="color: black">尊敬的用户，欢迎！</span>
      <div @click="handleUserClick" style="background-color: rgba(255,255,255,0)">
        <img
            v-if="userImage"
            :src="`${apiBaseUrl}/${userImage}`"
            alt="用户头像"
            class="user-avatar"
        />
        <img
            v-else
            src="@/assets/user.png"
            alt="默认头像"
            class="user-avatar"
        />
      </div>
    </div>
  </header>
</template>

<script setup>
import { useUserStore } from "@/store/user"
import BaseButton from '@/components/BaseButton.vue'

const props = defineProps({
  isCollapsed: {
    type: Boolean,
    default: false
  }
})

// 从 userStore 获取用户信息
const userStore = useUserStore()
const userImage = userStore.userImage || ''  // 获取用户头像 URL
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL  // 从环境变量获取 API 基础 URL
console.log(userStore.userImage)
// 处理用户头像点击事件
const handleUserClick = () => {
  alert('账号设置在左边！')
}
</script>

<style scoped>
:root {
  --highlight-color: #ff5733; /* 设置为一种橙色 */
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  color: white;
  box-shadow: var(--box-shadow);
  width: 100%;
  box-sizing: border-box;
  .is-active {
    transform: rotate(180deg);

  }
}

.title {
  padding-left: 144px;
  color: gray;
  font-size: var(--font-size-large);
  margin: 0;
  text-align: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-info span {
  font-size: var(--font-size-small);
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--secondary-color);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.user-avatar:hover {
  border-color: var(--highlight-color);
}

@media (max-width: 768px) {
  .title {
    font-size: var(--font-size-base);
  }


}
</style>
